面试题|设计一个满屏品字布局 |
您所在的位置:网站首页 › 前端面试常见题 简书 › 面试题|设计一个满屏品字布局 |
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中,需要对CSS能够灵活的运用。首先,这里面涉及到的相关知识点有: 1.元素的水平居中: 使用margin:0 auto;可以水平居中; 使用text-align:center;给父元素设置使其行内元素水平居中。 2.元素相对窗口定位: 使用position:fixed;固定定位,元素总是根据浏览器的窗口进行定位; 使用position:absolute;绝对定位; 使用body和html的width和height属性填充窗口。 3.元素左右定位: 使用float左右浮动; 使用position:absolute;绝对定位进行左右定位。 下面用两种方式进行展示: 方式一: 品字布局 * {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */ html, body {height: 100%;}/* 默认HTML,body的高度为0,为其设置高度以使后面的div可以用百分比设置高度 */ .header {height: 50%;width: 50%;background-color: rgb(255,2545,167);margin: 0 auto;} .main {height: 50%;width: 100%;} .main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);} .main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);}方式二: 品字布局 * {margin: 0;padding: 0;} html, body {height: 100%;}/* 默认HTML,body的高度为0,为其设置高度以使后面的div可以用百分比设置高度 */ .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;} .header {height: 50%;} .header .div-up {width: 50%;height: 100%;background-color: rgb(255,2545,167);margin: 0 auto;} .main {height: 50%;position: relative;} .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);} .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);} 效果图如下: 图片发自简书App个人前端学习笔记均为原创。 首发CSDN: Freya_yyy的博客 。欢迎交流和指导。 我是木风,愿你遇见美好! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |